<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="10" style="height:100px;">
        <el-row :gutter="20">
          <el-col :span="4" style="height:100px;">
            <div></div>
          </el-col>
          <el-col :span="20" style="height:100px;">
            <div>{{userData.fullname}},{{userData.askTooltip}}</div>
            <div>
              <div>{{userData.day}} {{userData.week}}</div>
              <div></div>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="10" style="height:100px;">
        <el-input />
          <el-button>搜索</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="18">
      <el-card shadow="always">
          <div slot="header" class="clearfix">
            <span>待处理</span>
          </div>
      </el-card>        
        
      <el-card shadow="always" style="margin-top:25px">
          <div slot="header" class="clearfix">
            <span>日程</span>
          </div>
      </el-card>        
      </el-col>
      <el-col :span="6">
      <el-card shadow="always" style="margin-left:25px;">
          <div slot="header" class="clearfix">
            <span>最近访问</span>
          </div>
      </el-card>        
      <el-card shadow="always" style="margin-top:25px; margin-left:25px;">
          <div slot="header" class="clearfix">
            <span>快捷入口</span>
          </div>
      </el-card>    
      <el-card shadow="always" style="margin-top:25px; margin-left:25px;">
          <div slot="header" class="clearfix">
            <span>主力合约</span>
          </div>
      </el-card>            
        
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {getHost} from '@/utils/socket' // secondary package based on el-pagination
import {getSymbol} from '@/utils/symbol' // secondary package based on el-pagination
import { parse } from 'path-to-regexp'
import { parseTime } from '@/utils'
export default {
  name: 'Dashboard',
  data() {
    return {
      socket:"",
      tableKey: 0,
      list: null,
      kbarChart:null,
      authorizeDialogHidden:false,
      total: '',
      listLoading: false,
      localSymbol:"i2309",
      symbol:"i2309",
      connected:"loading",
      authorizeForm:{},
      userData:{
        fullname:"那时此刻",
        askTooltip:"下午好",
        day:"2023年08月10日",
        week:"星期日"
      },
      filterForm: {
        page: 1,
        size: 10,
        localSymbol: undefined
      },
      realtimeTimer:false,
      authorizeTimer:false,
      purchaseTimer:false,
      policyTimer:false,
      baseUrl:"#/test-dsfsdfs",
      realtimeSetting:{
        scale:1,
        symbol:"i2309"
      },
      inventoryList:[],
      authorizeList:[],
      shipmentsList:[],
      policyList:[],
      turnoverList:[]
    }
  },
  computed: {
  },
  mounted(){
  },
  created() {
    //this.symbol = this.$route.query && this.$route.query.symbol
    let symbolData = getSymbol()
    try {
      this.localSymbol = symbolData.code
    } catch (error) {
      
    }
    let curDate = new Date()
    let curMonth = curDate.getMonth()
    curMonth = parseInt(curMonth)+1
    if(curMonth < 10){
      curMonth = "0"+curMonth
    }
    let curDay = curDate.getDate()
    curDay = parseInt(curDay)
    if(curDay < 10){
      curDay = "0"+curDay
    }

    let curWeek = curDate.getDay()
    let weekdays = ["星期日","星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    this.userData.week = weekdays[curWeek];
    this.userData.day = curDate.getFullYear()+"年"+curMonth+"月"+curDay+"日"

    let curHour = curDate.getHours()
    curHour = parseInt(curHour)
    this.userData.askTooltip = '安好';
    if(curHour < 8){
      this.userData.askTooltip = '上午好';
    }
    console.log(curHour)
    console.log(this.userData)
    //this.init()
  },
  destroyed:function(){
    this.close()
  },
  methods:{
    init: function () {
      if(typeof(WebSocket) === "undefined"){
          alert("您的浏览器不支持socket")
      }else{
          // 实例化socket
          this.socket = new WebSocket(getHost())
          // 监听socket连接
          this.socket.onopen = this.open
          // 监听socket连接
          this.socket.onclose = this.close
          // 监听socket错误信息
          this.socket.onerror = this.error
          // 监听socket消息
          this.socket.onmessage = this.getMessage
      }
    },
    open: function () {
        let _this = this;
        this.connected = 'loaded'

        this.getList()
    },
    error: function (e) {
        console.log("连接错误",JSON.stringify(e))
    },
    getMessage: function (receiveData) {
      let _this = this;
      receiveData = JSON.parse(receiveData.data)
        console.log(receiveData)
      if(receiveData.status != 200){
          console.log(receiveData.msg)
      }else{
        let localUrl = window.location.href
        console.log(localUrl)
      }
    },
    send: function (params) {
        console.log(this.socket)
      params = JSON.stringify(params)
      try {
        this.socket.send(params)
      } catch (error) {
        console.log("发送失败，socket已经关闭")
      }
    },
    close: function () {
        console.log("socket已经关闭")
        //this.init()
    },
    openAuthorizeDialog:function(){
      this.authorizeDialogHidden = true;

    },
    closeAuthorzeButton:function(){
      this.authorizeDialogHidden = false;
    },
    closeAuthorizeSubmit:function(){
      this.authorizeDialogHidden = false;
      this.send({
        "conversationType":"position.authorize.save",
        "message":this.authorizeForm,
        "target":{"id":"3"}
      })
    },
    getList:function(){
      console.log("读取行情")
      this.send({
        "conversationType":"quotation.realtime.list",
        "message":{"symbol":this.symbol,"scale":this.realtimeSetting.scale,"page":1,"size":1000},
        "target":{"id":"3"}
      })
    }
  }
}
</script>
